<template>
    <EaSvgIcon
        icon-name="theme"
        @click="handleThemeSwitch"
        class="transition-all duration-200 cursor-pointer text-xl mt-1"
        :class="{ 'rotate-180': isRotating }"
        :style="{ color: 'var(--theme-ThemeSwitch)' }"
    />
</template>

<script setup lang="ts">
import { EaSvgIcon } from '@/components'
import { useThemeStore } from '@/stores/modules/theme'
import { getCurrentTheme } from '@/utils/theme/theme'
import { computed, ref } from 'vue'
const themeStore = useThemeStore()
const theme = ref<string>(getCurrentTheme())
const handleThemeSwitch = async (e: PointerEvent) => {
    const transition = document.startViewTransition(() => {
        theme.value = theme.value === 'light' ? 'dark' : 'light'
        themeStore.setHtmlDataTheme(theme.value)
    })
    const x = e.clientX
    const y = e.clientY
    const tragetRadius = Math.hypot(Math.max(x, window.innerWidth - x), window.innerHeight - y)

    await transition.ready

    document.documentElement.animate(
        {
            clipPath: [`circle(0% at ${x}px ${y}px)`, `circle(${tragetRadius}px at ${x}px ${y}px)`],
        },
        {
            duration: 1000,
            pseudoElement: '::view-transition-new(root)',
            easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
        },
    )
}
const isRotating = computed(() => theme.value === 'dark')
</script>

<style lang="scss" scoped></style>
